<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="106">
      </el-table-column>
      <el-table-column prop="parentText" min-width="106" align="center" label="父菜单" width="180">
      </el-table-column>
      <el-table-column min-width="146" align="center" prop="text" label="菜单名称">
      </el-table-column>
      <el-table-column min-width="370" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
                 size="mini"
                 type="danger"
                 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagetbnBox">
      <div class="lipagination">
        <el-pagination background layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange"
        :page-size="10"
        :pager-count="5"
        :current-page="currentPage" @current-change="handleCurrentChange" hide-on-single-page>
        </el-pagination>
      </div>
    </div>
    <!--  弹框 -->
    <div class="newadddcmd">
      <el-dialog title="编辑菜单"  top="250px" id="addRole"  :visible.sync="show">
        <el-form label-position="left" :model="form">
          <el-form-item label="菜单父级" label-width="80px">
            <el-input maxlength="30" style="width: 86%;" v-model="form.parentText" :disabled="true" placeholder="请选择菜单父级"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" label-width="80px">
            <el-input style="width: 86%;" v-model="form.text" auto-complete="off" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancleBtn" @click="show = false">取 消</el-button>
          <el-button type="primary" @click="handSure">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from 'request'
import ycButton from '@/components/button.vue'
import ycCancelButton from '@/components/cancelButton.vue'
export default {
  name: 'menuTable',
  components: {
    ycButton,
    ycCancelButton
  },
  props: {
    total: null,
    tableData: {
      type: Array
    }
  },
  data () {
    return {
      show: false,
      currentPage: '',
      form: {
        menuId: null,
        parentId: '',
        text: '',
        parentText: '',
        parentMenu: []
      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$parent.init(val)
    },
    handleSizeChange (val) {
    },
    handSure () {
      if (!this.form.text) {
        this.$message.error('请输入菜单名称')
        return
      }
      request.editMenu({
        menuId: this.form.menuId,
        parentId: this.form.parentId,
        text: this.form.text
      }).then(res => {
        if (res) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$parent.init(this.currentPage)
          }, 500)
        }
      }).catch(e => {
        this.$message.error('编辑失败')
      })
      this.show = false
    },
    handleEdit (index, row) {
      this.show = true
      this.form.menuId = row.menuId
      this.form.parentId = row.parentId
      this.form.text = row.text
      this.form.parentText = row.parentText
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.deteMenu(row.menuId).then(res => {
          if (res.data) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            setTimeout(() => {
              location.reload()
            }, 1000)
          } else {
            this.$message.error('删除失败,因为有子菜单')
          }
        }).catch(res => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleConfig () {}
  },
  created () {
    this.currentPage = Number(localStorage.getItem('menuMangeCurrentPage')) || 1
    this.$parent.init(this.currentPage)
  },
  beforeUpdate () {
    localStorage.setItem('menuMangeCurrentPage', this.currentPage)
  }
}
</script>

<style lang="stylus" scoped>
  .block {
    float right
    padding 20px 0 0 0
  }
</style>
